<template>
  <div>
      楼层：
      <el-select
        v-model="floor"
        class="m-2"
        placeholder="请选择楼层"
        style="width: 240px"
        @change="exchangeFloor"
      >
        <el-option label="一楼" value="一楼"/>
        <el-option label="二楼" value="二楼"/>
      </el-select>

      <div style="display: inline-block;margin-left: 20px;">
        <img src="@/assets/u137.png" alt="">
        <span>总床数：{{roomVo.zcw}}</span>
      </div>

      <div style="display: inline-block;margin-left: 20px;">
        <img src="@/assets/u139.png" alt="">
        <span>空闲床数：{{roomVo.kx}}</span>
      </div>

      <div style="display: inline-block;margin-left: 20px;">
        <img src="@/assets/u141.png" alt="">
        <span>有人床数：{{roomVo.yr}}</span>
      </div>

      <div style="display: inline-block;margin-left: 20px;">
        <img src="@/assets/u143.png" alt="">
        <span>外出床数：{{roomVo.wc}}</span>
      </div>

      <table style="width: 90%;margin-top: 20px;">
        <tr>
          <td v-for="(item,index) in roomVo.roomList" :key="item.id" v-show="index < 9">
              <div class="roomCls" >{{item.roomNo}}</div>
          </td>
        </tr>

        <tr>
          <td v-for="(room,index) in roomVo.roomList" :key="room.id" v-show="index < 9">
            <div v-for="bed in room.bedList" :key="bed.id" >
              <img src="@/assets/u139.png" v-show="bed.status == 1"/>
              <img src="@/assets/u141.png" v-show="bed.status == 2"/>
              <img src="@/assets/u143.png" v-show="bed.status == 3"/>
              {{ bed.bedNo }}
            </div>
          </td>
        </tr>

        <tr>
          <td v-for="(item,index) in roomVo.roomList" :key="item.id" v-show="index >= 9">
              <div class="roomCls" >{{item.roomNo}}</div>
          </td>
        </tr>

        <tr>
          <td v-for="(room,index) in roomVo.roomList" :key="room.id" v-show="index >= 9">
            <div v-for="bed in room.bedList" :key="bed.id" >
              <img src="@/assets/u139.png" v-show="bed.status == 1"/>
              <img src="@/assets/u141.png" v-show="bed.status == 2"/>
              <img src="@/assets/u143.png" v-show="bed.status == 3"/>
              {{ bed.bedNo }}
            </div>
          </td>
        </tr>
      </table>

  </div>
</template>

<script>
import RoomApi from '@/api/Room.js'
  export default {
    data () {
      return {
        floor: '一楼',
        roomVo:{}
      }
    },
    created () {
      this.findCwsyBedVo(this.floor)
    },
    methods: {
      exchangeFloor(val){
        this.floor = val;
        this.findCwsyBedVo(this.floor);
      },
      findCwsyBedVo(val){
        RoomApi.findCwsyBedVo(val).then(res=>{
          this.roomVo = res.data;
        })
      }
    }
  }
</script>

<style scoped>
  .roomCls{
    height: 40px;
    border: 1px solid #c3c3c3;
    text-align: center;
    line-height: 40px;
    background-color: #0168b7;
    color: #fff
  }

  
</style>